<template>
  <div class="flex flex-col items-center">
    <filterRules ref="filterRulesRef" v-model:modelValue="state.filterRules" />
    <el-button type="primary" @click="generateResult">生成结果</el-button>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";

const filterRulesRef = ref<any>();

const state = reactive({
  filterRules: {}
});

// 对运算符和筛选项为空的进行剔除
function cleanConditions(group: any) {
  if (!group || !group.children) return group;
  group.children = group.children
    .filter((child: any) => child.conditionKey !== "" || child.conditionType !== "")
    .map((child: any) => {
      if (child.type === "group") {
        return cleanConditions(child);
      }
      return child;
    });
  return group;
}

const generateResult = async () => {
  try {
    const isOk = await filterRulesRef.value.validate();
    if (isOk) {
      const obj = cleanConditions(state.filterRules);
      alert("ok");
    }
  } catch (error) {
    console.log(error);
  }
};
</script>

<style lang="scss" scoped></style>
